import { useState } from 'react'
import Head from 'next/head'

import { IProject } from '../models/types'
import { data as mockData } from '../libs/mockdata'
import Options from '../components/Options'
import Header from '../components/Header'
import Banner from '../components/Banner'
import { Footer } from '../components/Footer'
import styles from '../styles/Home.module.css'

const likeIcon = (
  <svg className='w-6 h-6 hover:fill-current cursor-pointer' xmlns="http://www.w3.org/2000/svg" enableBackground="new 0 0 24 24" viewBox="0 0 24 24" role="img" fill="#9e9ea7">
    <path d="m18.199 2.04c-2.606-.284-4.262.961-6.199 3.008-2.045-2.047-3.593-3.292-6.199-3.008-3.544.388-6.321 4.43-5.718 7.96.966 5.659 5.944 9 11.917 12 5.973-3 10.951-6.341 11.917-12 .603-3.53-2.174-7.572-5.718-7.96z"></path>
  </svg>
)

const viewIcon = (
  <svg className='w-6 h-6 hover:fill-current cursor-pointer' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 11" fill="#9e9ea7" role="img">
    <path d="M7 3.45833C5.87242 3.45833 4.95833 4.37242 4.95833 5.5C4.95833 6.62758 5.87242 7.54167 7 7.54167C8.12758 7.54167 9.04167 6.62758 9.04167 5.5C9.04167 4.37242 8.12758 3.45833 7 3.45833ZM7 0.25C3.13425 0.25 0 4.625 0 5.5C0 6.375 3.13425 10.75 7 10.75C10.8657 10.75 14 6.375 14 5.5C14 4.625 10.8657 0.25 7 0.25ZM7 8.70833C5.22783 8.70833 3.79167 7.27217 3.79167 5.5C3.79167 3.72783 5.22783 2.29167 7 2.29167C8.77217 2.29167 10.2083 3.72783 10.2083 5.5C10.2083 7.27217 8.77217 8.70833 7 8.70833Z"></path>
  </svg>
)

const Home = () => {
  const [projects] = useState<IProject[]>(mockData.data.items)

  return (
    <div className="box-border">
      <Head>
        <title>Dribbble</title>
        <meta name="description" content="dribbble create by tailwind css and nextjs" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <Header/>
      <main className={`w-full pt-24`}>
        <Banner/>
        <div className={`box-border w-full py-6 sm:max-w-sm 2xl:pt-12 2xl:pb-16`}>
          <ul className={`grid gap-10 px-8 md:px-10 3xl:px-28 ${styles.list}`}>
            {projects?.map((item, index) => (
              <li className="w-full flex flex-col" key={index}>
                <a className="flex justify-center rounded-xl items-center w-full overflow-hidden" href="">
                  <img className="w-full h-auto rounded-xl hover:scale-125 transition-all duration-300" src={item.cover} alt=""/>
                </a>
                <div className="w-full flex items-center justify-between mt-4">
                  <a className='flex items-center' href="">
                    <img className="rounded-full h-10 w-10" src={item.avatar} alt=""/>
                    <span className={`font-semibold ml-2 ${styles['details-name']}`}>{item.name}</span>
                    <span className={`hover:bg-primary font-bold h-7 flex items-center justify-center ${styles['badge-link']}`}>{item.badge}</span>
                  </a>

                  <Options
                    options={[
                      { icon: likeIcon, value: item.likes },
                      { icon: viewIcon, value: item.views }
                    ]}
                  />
                </div>
              </li>
            ))}
          </ul>
        </div>
      </main>
      <Footer/>
    </div>
  )
}

export default Home
